<template>
  <div>
    <div class="title">数据概况</div>
    <div class="dataSituation">
      <div>
        <div class="data">{{lingqu}}%</div>
        <div>领取率</div>
      </div>
      <div>
        <div class="data">{{shiyong}}%</div>
        <div>使用率</div>
      </div>
      <div>
        <div class="data">{{feixiao}}%</div>
        <div>费效比</div>
      </div>
      <div>
        <div class="data">{{bidan}}%</div>
        <div>用券笔单价</div>
      </div>
      <div>
        <div class="data">{{laxin}}%</div>
        <div>拉新率</div>
      </div>
      <el-popover
              placement="top-start"
              width="400"
              trigger="hover">
        <div style="text-align: left; margin: 0">
          <div class="msgBox">
            <span class="msgTitle">领取率：</span>
            <span>优惠券领取总量/优惠券发放总量</span>
          </div>
          <div class="msgBox">
            <span class="msgTitle">使用率：</span>
            <span>优惠券已使用总量/优惠券已领取总量</span>
          </div>
          <div class="msgBox">
            <span class="msgTitle">费效比：</span>
            <span>优惠总金额/用券总成交额</span>
          </div>
          <div class="msgBox">
            <span class="msgTitle">用券笔单价：</span>
            <span>用券总成交额 / 使用该优惠券的付款订单总数</span>
          </div>
          <div class="msgBox">
            <span class="msgTitle">拉新率：</span>
            <span>新增用户数/总用户数</span>
          </div>
        </div>
        <el-button slot="reference" icon="el-icon-question" style="padding: 5px;font-size: 20px;border-radius: 20px"></el-button>
      </el-popover>
    </div>
    <div class="selectContent">
      <div>
        <div class="inputBox">
          <span class="inputTitle">活动ID：</span>
          <el-input
                  type="text"
                  placeholder="请输入活动ID"
                  v-model="activeID"
          >
          </el-input>
        </div>
        <div class="inputBox">
          <span class="inputTitle">优惠券名称：</span>
          <el-input
                  type="text"
                  placeholder="请输入优惠券名称"
                  v-model="couponName"
          >
          </el-input>
        </div>
        <div class="inputBox">
          <span class="inputTitle">优惠卷状态：</span>
          <el-radio v-model="radio" label="未使用">未使用</el-radio>
          <el-radio v-model="radio" label="已使用">已使用</el-radio>
          <el-radio v-model="radio" label="已过期">已过期</el-radio>
        </div>
      </div>
      <div>
        <div class="inputBox">
          <span class="inputTitle">活动名称：</span>
          <el-input
                  type="text"
                  placeholder="请输入活动名称"
                  v-model="activeName"
          >
          </el-input>
        </div>
        <div class="inputBox">
          <span class="inputTitle">领取时间：</span>
          <el-date-picker
                  v-model="CollectionTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="date"
                  placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>
      <div>
        <div class="inputBox">
          <span class="inputTitle">优惠卷ID：</span>
          <el-input
                  type="text"
                  placeholder="请输入优惠卷ID"
                  v-model="couponID"
          >

          </el-input>
        </div>
      </div>
    </div>
    <div class="btnBox">
      <el-button type="primary" size="medium" @click="selectCoupon">查询</el-button>
      <el-button type="primary" size="medium" @click="reset">重置</el-button>
    </div>
    <el-table
            :data="tableData"
            border
            :cell-style="cellStyle"
            :header-cell-style="headerStyle"
            style="width: 90%"
    >
      <el-table-column
              prop="couponId"
              label="优惠券ID">
      </el-table-column>
      <el-table-column
              prop="couponName"
              label="优惠券名称">
      </el-table-column>
      <el-table-column
              prop="activeId"
              label="活动ID">
      </el-table-column>
      <el-table-column
              prop="activeName"
              label="活动名称">
      </el-table-column>
      <el-table-column
              prop="miane"
              label="面额（元）">
      </el-table-column>
      <el-table-column
              prop="date"
              label="领取时间">
      </el-table-column>
      <el-table-column
              prop="couponState"
              label="优惠券状态">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "couponSituation",
        data(){
            return{
                lingqu:80,
                shiyong:70,
                feixiao:60,
                bidan:90,
                laxin:70,
                activeID:'',
                activeName:'',
                couponName:'',
                CollectionTime:'',
                couponID:'',
                radio:'未使用',
                tableData:[],
                temporaryData:[],
                selectData:[],
                cellStyle:{"text-align":"center"},
                headerStyle:{"text-align":"center","background-color":"#3366FF","color":"white"}
            }
        },
        methods:{
            selectCoupon(){
                if (this.activeID!=''&&this.activeName!=''&&this.couponID!=''&&this.couponName!=''&&this.CollectionTime!='') {
                  axios({
                      url:'http://123.57.67.148:3000/mock/321/selectCoupon',
                      method:'post',
                      data:{
                          activeId:this.activeID,
                          activeName:this.activeName,
                          couponId:this.couponID,
                          couponName:this.couponName,
                          couponState:this.radio,
                          date:this.CollectionTime
                      }
                  }).then(res=>{
                      this.selectData=res.data.data
                      this.tableData=this.selectData
                  }).catch(err=>{
                      console.log(err)
                  })
                }else {
                    this.$message.error('请输入查询条件')
                }
            },
            reset(){
                this.activeID=''
                this.activeName=''
                this.couponName=''
                this.CollectionTime=''
                this.couponID=''
                this.tableData=this.temporaryData
            }
        },
        created() {
            axios({
                url:'http://123.57.67.148:3000/mock/321/getCoupon',
                method:'get'
            }).then(res=>{
                this.temporaryData=res.data.data
                this.tableData=this.temporaryData
            }).catch(err=>{
                console.log(err)
            })

        },
    }
</script>

<style scoped lang="less">
  .title{
    padding: 20px 10px;
    border-bottom: 1px solid #c0c0c0;
  }

  .dataSituation{
    display: flex;
    justify-content: space-around;
    text-align: center;
    font-size: 20px;
  }

  .dataSituation>div{
    padding: 50px 0;
  }

  .dataSituation>div>div{
    padding: 5px 0;
  }

  .data{
    font-size: 24px;
  }

  .el-input{
    width: 150px;
  }

  .inputBox{
    margin: 20px 0;
  }
  .inputTitle{
    display: inline-block;
    width: 100px;
    text-align: right;
  }

  .inputTitle{
    display: inline-block;
    width: 180px;
    text-align: right;
  }

  .selectContent{
    display: flex;
    justify-content: space-around;
  }

  .btnBox{
    margin-left: 150px;
  }

  .el-table {
    margin: 30px auto;
  }

  .msgBox{
    padding: 10px 0;
  }

  .msgTitle{
    font-weight: bolder;
  }
</style>